<template>
  <div class="header">
  <div class="header-left">
  <router-link to="/city">
  <div class="iconfont">&#xe642;</div>
  </router-link>
  </div>
  <div class="header-input">
  <span class="iconfont sousuo">&#xe612;</span>
  输入城市/景点/游玩主题</div>
  <router-link to="/city">
   <div class="header-right">
   <span>{{this.city}}</span>
   <span class="iconfont jiantou">&#xe62a;</span>
   </div>
  </router-link>
  </div>
</template>

<script>

import { mapState } from 'vuex'

export default {
  name: 'HomeHeader',
  // props: {
  //   city: [String, Number]
  // },
  computed: {
    // 映射属性 简化代码， 不用写成 this.$store.state.city
    ...mapState(['city'])
  }
}
</script>
<!--scoped让样式自能在当前组件产生效果-->
<!--样式里面嵌套样式 @import -->
<style lang="stylus" scoped>
@import '~@/assets/style/varibles.styl'
.header
  display :flex
  line-height:3.3rem
  background-color : $bgColor
  color:#fff
  text-align :center
.header-left
  width :5.5rem
  float :left
  padding-right: 0.6rem
  .iconfont
   color : #fff
.header-input
  flex :1
  height :2.3rem
  line-height : 2.5rem
  margin-top:.5rem
  background :#fff
  color : #ccc
  border-radius: .2rem
.sousuo
  font-size :1.2rem
  margin-left:-5rem
.header-right
  min-width :5rem
  color:#fff
  font-size: 1.1rem
  padding-left:0.5rem
  .jiantou
   font-size: 1.2rem
   padding-left : 0.2rem
</style>
